<template>
	<div class="dh_jmhy_sync_details">

	    <div class="d_j_s_d-icon" @click="back" title="返回上一步操作"></div>
		<div class="d_j_s_d-list">
			<div class="d_j_s_d-list-title">
				<!-- <div>申请号</div> -->
				<div>会员号</div>
				<div>会员名称</div>
				<div>手机号</div>
				<div>申请金额</div>
				<div>入驻时间</div>
				<div>操作</div>
			</div>
			<!-- 列表数据 -->
			<div class="d_j_s_d-list-details" v-for="(item,key) in listdetails" :key="key">
				<!-- <div>{{item.id}}</div> -->
				<div>{{item.user_id}}</div><!--  -->
				<div>{{item.real_name}}</div><!--  -->
				<div>{{item.phone}}</div>
				<div>{{item.money}}</div>
				<div v-if="item.time">{{item.time*1000 | formatDate}} {{item.time*1000 | formatDateBehind}}</div>
				<div v-else></div>
				<!-- 列表的操作，同意或拒绝 -->
				<div class="d_j_s_d-l-det-result"> <!--  :class="item.state == 0?'d_j_s-l-det-btn':'d_j_s-l-det-text'" -->
					<div v-if="item.state == 0" class="djsd-ldres-btn">
						<button @click="userselection(1,item.id,item.state,item.user_id,item.money,item.time,key)">同意</button>
						<button @click="userselection(2,item.id,item.state,item.user_id,item.money,item.time,key)">拒绝</button>
					</div>
					<span v-else>{{verify[item.state]}}</span>
				</div>
			</div>
		</div>
		
	</div>
</template>

<script>
	import {date} from '../js/time.js';  			 //用于时间戳转换时间
	import {timetamp} from '../js/time.js'		 //用户日期转时间戳
	import {formatDate} from '../js/time.js';		 //直接在标签中转化时间的方法
	export default{
		data(){
			return{
				login: 0,
				id: 0,
				listdetails:[],
				verify:['','同意','拒绝']
			}
		},
		//过滤器
		filters: {
		    formatDate(time) {							 //日期(年月日)
		        var date = new Date(time);
		        return formatDate(date, 'yyyy-MM-dd');   //年月日 格式自己定义   'yyyy : MM : dd'  例 2018年12月5日的格式
		    },
		    formatDateBehind(time) {					 //时间(时分秒)
		        var date = new Date(time);
		        return formatDate(date, 'hh:mm:ss');     //时间点 例 21点12分12秒的格式
		    }
		},
		methods: {
			back(){
				this.$router.go(-1);//返回上一层
			},
			// 跳转后自动获取的值
			detailsrequest(){
				let that = this
				const axios = require('axios')
				let data = {
					name: that.login.uname,
					password: that.login.pwd,
					user_id: that.id
				}
				let updata = JSON.stringify(data)
				// console.log(updata)
				axios({
					method: 'post',
					url: '/api/api/dh_jm/business_apply.php',
					header: { "Content-Type": "application/JSON" },
					data: updata
				})
				.then( resp=> {
					let data = resp.data.data
					// console.log(data)
					for(var q=0;q<data.length;q++){
						// console.log(that.id,data[q].user_id)
						if(that.id == data[q].user_id){
							// console.log(q)
							that.listdetails.push(data[q])
						}
					}
				})
				.catch( err=> {console.log(err)})
			},
			// 数据更新的值
			userselection(e,id,state,user_id,money,time,key){
				// console.log(e,id,state,user_id,money,time)
				let that= this
				const axios = require('axios')				
				that.login = JSON.parse(sessionStorage.getItem("dh_jmhylogin"))
				//入驻时间
				// console.log(time)
				//当前时间
				var y = new Date().getFullYear(); 	//得到年份	
				var m = new Date().getMonth()+1;	//得到月份				
				var d = new Date().getDate();		//得到日期
				m < 10 ? m = "0" + m : m;
				d < 10 ? d = "0" + d : d
				let end = y+"/"+m+"/"+d
				let end_time = timetamp(end)
				//上传的更新的数据
				let data = {
					name: that.login.uname,
					password: that.login.pwd,
					state: e,
					user_id: user_id,
					money: money,
					id: id,
					begin_time: time,
					end_time: end_time
				}
				let updata = JSON.stringify(data)

				//列表数据，在生命周期函数中写，也可以写在方法例面，在生命周期函数中调用
				axios({
					method: 'post',
					url: '/api/api/dh_jm/apply_operation.php',
					header: { "Content-Type": "application/JSON" },
					data: updata
				})
				.then( resp=> {
					// console.log(resp,key,e)
					if(e===1){
						// console.log("对的")
						that.listdetails[key].state = 1
						console.log(that.listdetails)
						// console.log(that.listdetails)
					}else{
						that.listdetails[key].state = 2
					}
				})
				.catch( err=> {
					console.log(err)
				})
			}
		},
		mounted() {
			let that = this
			that.login = JSON.parse(sessionStorage.getItem("dh_jmhylogin"))
			// console.log(that.$route.query)
			that.id = that.$route.query.user_id
			that.detailsrequest()
		}
	}
</script>

<style>
	/* 默认样式清除 */
	button{
		outline: none;
		color: white;
		background-color: transparent;
		border: 0;
	}
	/* 子路由的最外层盒子 */
	.dh_jmhy_sync_details{
		width: 100%;
		height: 100%;
		/* margin: auto; */
		padding: 20px;
	}
	.d_j_s_d-icon{
		width: 20px;
		height: 20px;
		margin: 10px;
		background: url(../assets/return.png);
		transform: translate(-10px,-15px);
	}
	/* 列表的类名样式 */
	.d_j_s_d-list{
		font-size: 14px;
		background-color: white;
		border: 1px solid #cecece;
		border-radius: 5px;
	}
	/* 列表每一项的标题 */
	.d_j_s_d-list-title{
		display: grid;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		/* grid-auto-rows: 50px; */
		/* grid-template-columns: 13% 13% 15% 15% 12% 20% 12%;*/
		padding: 15px 0;
		background-color: #dddddd;
	}
	/* 列表数据样式 */
	.d_j_s_d-list-details{
		display: grid;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		grid-auto-rows: 55px;
		/* grid-template-columns: 13% 13% 15% 15% 12% 20% 12%; */
		/* padding: 15px 0; */
	}
	.d_j_s_d-list-details>div{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.d_j_s_d-list-details:nth-child(odd){
		background-color: #e1e1e1;
	}

	.d_j_s_s-l-det-result{
		display: flex;
		justify-content: center;
		align-items: center;
		color: #409eff;
	}
	/* 单项去除伪类属性的居中效果 */
	.d_j_s_d-l-det-result::befor{
		display: none;
		height: 0;
	}
	.djsd-ldres-btn{
		white-space: nowrap;
		width: 80px;
		height: 30px;
	}
	.djsd-ldres-btn>button:nth-child(1){
		display: inline-block;
		width: 50%;
		height: 100%;
		background-color: #409eff;
	}
	.djsd-ldres-btn>button:nth-child(2){
		display: inline-block;
		width: 50%;
		height: 100%;
		background-color: #f56c6c;
	}
</style>
